<template>
  <div class="discount-detail">
    <div class="discount-info">
      <div class="left-container">
        <div class="top-img">
          <img :src="data.img"/>
        </div>
        <div class="discount-wrap">
          <div class="header">{{data.title}}</div>
          <div class="activity-content">
            <div class="title">活动内容</div>
            <div class="content" v-html="data.content"></div>
          </div>
          <div class="activity-description">
            <div class="title">活动细则</div>
            <div class="content">
              <p
                v-for="(item, index) in activityDescription"
                :key="index"
              >
                {{index + 1}}. {{item}}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="right-container">
        <div class="company-info">
          <div class="header-wrap">
            <img :src="`${$baseImgUrl}home/warrant01.png`" />
            <div>
              <h2>{{data.company_name}}</h2>
              <div>
                点评: <span class="num">161</span>条
                <span class="divide"></span>
                推荐: <span class="num">378</span>人
              </div>
              <div>
                点评分值：<span class="score">4.8</span>分
              </div>
            </div>
          </div>
          <div class="certification-wrap">
            认证：
            <span
              v-if="true"
              class="guarantee"
              :style="{background: `url('${$baseImgUrl}company/guarantee_icon.png') no-repeat`}"
            />
          </div>
          <div class="plat-wrap">
            <b>平台</b>
            <span
              v-for="(item, index) in platList"
              :key="index"
            >
              {{item}}
            </span>
          </div>
          <div class="security-wrap">
            <b>保障</b>
            <span
              v-for="(item, index) in securityList"
              :key="index"
            >
              {{item}}
            </span>
          </div>
        </div>
        <div class="company-btn-wrap">
          <router-link class="enter" tag="div" :to="`/company/${companyId}`">进入公司</router-link>
          <div class="collect" @click="collect">收藏公司</div>
        </div>
        <div class="alternate-url-wrap">
          <div class="title">备用网址</div>
          <div class="content">
            <a
              v-for="(item, index) in urlList"
              :key="index"
              :href="item.url"
              target="blank"
            >
              <span>备用{{index + 1}}</span>
              <span class="timeout">{{item.timeout}}ms</span>
            </a>
          </div>
        </div>
        <div class="company-description">
          <div class="title">公司简介</div>
          <div class="content">
            GALAXY澳门银河公司MACAU注册于澳门特区政府，[澳门银河]是世界级亚洲特色的五星级综合度假城，投资额达165亿港币。。。
          </div>
        </div>
        <div class="hot-recommend">
          <div class="header">
            热门推荐
            <span class="change-hot-recommend" @click="changeHotRecommend">换一批</span>
          </div>
          <ul class="content">
            <router-link
              v-for="(item, index) in recommendList"
              :key="index"
              tag="li"
              :to="`/discounts/${item.id}`"
            >
              <img :src="`${$baseImgUrl}home/${item.img}`">
              <div class="description">{{item.description}}</div>
            </router-link>
          </ul>
        </div>
      </div>
    </div>
    <div class="get-discounts-wrap">
      <div>
        <span>对该优惠感兴趣</span>
        <div class="get-descounts-btn" @click="getDiscount">立即领取优惠</div>
      </div>
    </div>
    <div class="other-discounts">
      <div class="title">同城其他优惠</div>
      <ul class="content">
        <router-link
          v-for="(item, index) in otherDiscounts"
          :key="index"
          :to="`/discounts/${item.id}`"
          tag="li"
        >
          <div class="img-wrap">
            <img :src="`${$baseImgUrl}home/${item.img}`">
          </div>
          <div class="description">
            <div class="small-img-wrap">
              <img :src="`${$baseImgUrl}home/${item.smallImg}`">
              <span>{{item.smallImgTitle}}</span>
            </div>
            <div class="text">{{item.description}}</div>
          </div>
        </router-link>
      </ul>
    </div>
    <discounts-comments></discounts-comments>
  </div>
</template>

<script>
import DiscountsComments from './components/Comments.vue';

export default {
  name: 'DiscountDetail',
  components: {
    DiscountsComments
  },
  data() {
    return {
      data: {},
      companyId: '1',
      topImg: 'warrant01.png',
      discountHeader: '首存即送999好运彩金 无本万利',
      activityContent: '澳门银河，会员不管您是什么时候注册的，您只需完成第一次的首次存款，即可获得最高999加彩金，只要您来，我们就送！',
      activityDescription: [
        '所获彩金只需2倍下注即可提现，每个会员只能申请一次',
        '符合申请。。。',
        '澳门银河。。。',
        '若公司对活动有争议。。。',
        '此活动可与。。。',
        '澳门银河。。。',
        '参与该优惠。。。'
      ],
      platList: ['BBIN', 'AG', 'HG', 'PT', 'OPUS', 'MG', '皇冠', '沙巴', '自主', '其他'],
      securityList: ['保博', '认证', '牌照', 'SSL证书', '三年以上赞助APP'],
      urlList: [
        { url: 'http://www.baidu.com', timeout: 36 },
        { url: 'http://www.baidu.com', timeout: 105 },
        { url: 'http://www.baidu.com', timeout: 238 },
        { url: 'http://www.baidu.com', timeout: 72 },
        { url: 'http://www.baidu.com', timeout: 29 },
        { url: 'http://www.baidu.com', timeout: 75 },
        { url: 'http://www.baidu.com', timeout: 67 },
        { url: 'http://www.baidu.com', timeout: 42 }
      ],
      hotRecommendList: [
        { id: 2, img: 'warrant01.png', description: '优惠W88' },
        { id: 3, img: 'warrant01.png', description: '优惠W88' },
        { id: 4, img: 'warrant01.png', description: '优惠W88' },
        { id: 5, img: 'warrant01.png', description: '优惠W88' },
        { id: 6, img: 'warrant01.png', description: '优惠W88' },
        { id: 7, img: 'warrant01.png', description: '优惠W88' },
        { id: 8, img: 'warrant01.png', description: '优惠W88' },
        { id: 9, img: 'warrant01.png', description: '优惠W88' },
        { id: 10, img: 'warrant01.png', description: '优惠W88' },
        { id: 11, img: 'warrant01.png', description: '优惠W88' }
      ],
      otherDiscounts: [
        {
          id: 2, img: 'warrant01.png', smallImg: 'warrant01.png', smallImgTitle: '澳门银河', description: '生日彩金为您庆生 最高2888元！'
        },
        {
          id: 3, img: 'warrant01.png', smallImg: 'warrant01.png', smallImgTitle: '澳门银河', description: '生日彩金为您庆生 最高2888元！'
        },
        {
          id: 4, img: 'warrant01.png', smallImg: 'warrant01.png', smallImgTitle: '澳门银河', description: '生日彩金为您庆生 最高2888元！'
        }
      ]
    };
  },
  created() {
    this.getData();
  },
  computed: {
    recommendList() {
      return this.hotRecommendList.slice(0, Math.min(this.hotRecommendList.length, 9));
    }
  },
  methods: {
    // 获取详情数据
    getData() {
      this.$api.getCouponDetail(this.$route.params.id)
        .then(data => {
          this.data = data;
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '获取详情信息失败'
          });
        });
    },
    changeHotRecommend() {
    },
    // 领取优惠
    getDiscount() {
      if (!this.$store.state.userInfo) {
        this.$store.commit('SHOW_LOGIN', true);
        return;
      }
      this.$notify({
        title: '成功',
        message: '领取成功',
        type: 'success'
      });
      this.$api.getDiscount({
        discountId: this.$route.params.id
      });
    },
    collect() {
      this.$message({
        type: 'success',
        message: '收藏成功'
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .discount-detail {
    .discount-info {
      display: flex;
      .left-container {
        flex: 1;
        margin-right: 10px;
        .top-img {
          padding: 10px;
          height: 200px;
          background-color: #fff;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .discount-wrap {
          margin-top: 10px;
          min-height: 762px;
          color: #666;
          background-color: #fff;
          .header {
            padding-left: 15px;
            height: 40px;
            line-height: 40px;
            border-left: 5px solid #296ecc;
            background-color: #d6e6f5;
          }
          .activity-content,
          .activity-description {
            padding: 0 20px;
          }
          .activity-content {
            margin-top: 10px;
          }
          .title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
          }
          .content {
            padding: 20px 0;
            p {
              line-height: 20px;
            }
          }
        }
      }
      .right-container {
        flex: 0 0 300px;
        line-height: 20px;
        font-size: 12px;
        .company-info {
          padding: 10px;
          background-color: #fff;
          .header-wrap {
            display: flex;
            img {
              flex: 0 0 100px;
              width: 100px;
              height: 100px;
            }
            & > div {
              flex: 1;
              margin-left: 10px;
              line-height: 28px;
              h2 {
                line-height: 34px;
              }
              div {
                color: #888;
                .num {
                  margin: 0 3px;
                  font-weight: bold;
                  color: #00b0a2;
                }
                .divide {
                  display: inline-block;
                  width: 5px;
                }
                .score {
                  margin-right: 3px;
                  font-weight: bold;
                  color: #fcac31;
                }
              }
            }
          }
          .certification-wrap {
            margin: 5px 0;
            color: #888;
          }
          .plat-wrap {
            margin: 5px 0;
            b {
              margin-right: 3px;
              padding: 3px 5px;
              color: #fff;
              background-color: #94b6e5;
            }
          }
          .security-wrap {
            margin: 5px 0;
            b {
              margin-right: 3px;
              padding: 3px 5px;
              background-color: #8ce3b2;
              color: #fff;
            }
          }
        }
        .company-btn-wrap {
          display: flex;
          padding: 10px;
          justify-content: space-around;
          border-top: 1px solid #ddd;
          background-color: #fff;
          div {
            width: 40%;
            height: 34  px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-radius: 3px;
            &:first-child {
              background-color: #296ecc;
              color: #fff;
              &:hover {
                background-color: #2e5b98;
              }
            }
            &:last-child {
              border: 1px solid #ddd;
              &:hover {
                background-color: #eee;
              }
            }
          }
        }
        .alternate-url-wrap {
          background-color: #fff;
          padding-bottom: 10px;
          .title {
            margin: 0 10px;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            font-size: 14px;
            background-color: #b5eeca;
          }
          .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 10px;
            a {
              display: flex;
              justify-content: space-between;
              flex: 0 0 46%;
              box-sizing: border-box;
              margin-top: 6px;
              padding: 6px 10px;
              font-size: 14px;
              color: #666;
              border: 1px solid #ddd;
              text-decoration: none;
              &:hover {
                background-color: #b5eeca;
                color: #333;
              }
              .timeout {
                font-size: 12px;
                color: #33a655;
              }
            }
          }
        }
        .company-description {
          background-color: #fff;
          .title {
            margin: 0 10px;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            background-color: #d6e6f5;
          }
          .content {
            padding: 5px 10px;
            color: #888;
          }
        }
        .hot-recommend {
          margin-top: 10px;
          background-color: #fff;
          .header {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border-bottom: 3px solid #296ecc;
            .change-hot-recommend:hover {
              color: #33a655;
              cursor: pointer;
            }
          }
          .content {
            display: flex;
            padding: 10px 10px 5px 10px;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
              margin-bottom: 5px;
              width: 31%;
              cursor: pointer;
              img {
                width: 100%;
                height: 80px;
              }
              .description {
                text-align: center;
                color: #888;
              }
            }
            .router-link-active {
              background-color: #fff;
              .description {
                color: #888;
              }
            }
          }
        }
      }
    }
    .get-discounts-wrap {
      background-color: #fff;
      & > div {
        display: flex;
        margin: 0 20px;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
        border-top: 1px dashed #888;
        div {
          margin: 0 20px 0 10px;
          padding: 0 15px 0 40px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          background-color: #2ecc72;
          cursor: pointer;
        }
      }
    }
    .other-discounts {
      margin-top: 10px;
      .title {
        padding-left: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-bottom: 2px solid #bed3f0;
        background-color: #fff;
      }
      .content {
        display: flex;
        padding: 0 10px 10px 10px;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #fff;
        li {
          box-sizing: border-box;
          margin-top: 10px;
          padding: 10px 10px 0 10px;
          width: 49%;
          border: 1px solid #ddd;
          cursor: pointer;
          &:hover {
            background-color: #f4f4f4;
          }
          .img-wrap {
            margin: 0 auto;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .description {
            display: flex;
            height: 40px;
            justify-content: space-between;
            align-items: center;
            .small-img-wrap {
              display: flex;
              flex: 1;
              height: 100%;
              align-items: center;
              img {
                margin-right: 10px;
                padding: 2px;
                width: 24px;
                height: 24px;
                border: 1px solid #ddd;
              }
            }
            .text {
              width: 60%;
              text-align: right;
            }
          }
        }
      }
    }
  }
</style>
